
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>智慧泉溪管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="__CSS__/oksub.css?v=1">

    <link href="__CSS__/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="__CSS__/animate.min.css" media="all"/>
    <script src="__JS__/jquery.min.js"></script>
    <!--js逻辑-->
    <script src="__PLUG__/layui/layui.js?v=2.5.6"></script>
    <script type="text/javascript" src="__PLUG__/echarts/echarts.min.js"></script>
</head>

<body class="ok-body-scroll console">
<div class="ok-body home">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-01.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text incomes-num">20个</div>
                        <div class="stat-heading">商品总数</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card ">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-02.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text goods-num">52个</div>
                        <div class="stat-heading">订单总数</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-03.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text blogs-num">380元</div>
                        <div class="stat-heading">总金额</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-04.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text fans-num">320人</div>
                        <div class="stat-heading">总用户</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-05.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text incomes-num">20个</div>
                        <div class="stat-heading">邻里圈数</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card ">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-06.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text goods-num">520篇</div>
                        <div class="stat-heading">资讯文章</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-07.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text blogs-num">50个</div>
                        <div class="stat-heading">单位个数</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card">
                <div class="ok-card-body">
                    <div class="img-box" ok-pc-in-show="">
                        <img src="/static/images/home-08.png" alt="none">
                    </div>
                    <div class="cart-r">
                        <div class="stat-text fans-num">10个</div>
                        <div class="stat-heading">管理员总数</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12" >
            <div class="layui-card" >
                <div class="layui-card-header" >统计每月用户访问量</div >
                <div class="layui-card-body" >

                    <div class="flot-chart" style="height:350px;width: 100%;">
                        <div class="flot-chart-content" id="table11" style="height:350px; width: 100%">
                            <script type="text/javascript">
                                var dom = document.getElementById("table11");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                var posList = [
                                    'left', 'right', 'top', 'bottom',
                                    'inside',
                                    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                                    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                                ];
                                app.configParameters = {
                                    rotate: {
                                        min: -90,
                                        max: 90
                                    },
                                    align: {
                                        options: {
                                            left: 'left',
                                            center: 'center',
                                            right: 'right'
                                        }
                                    },
                                    verticalAlign: {
                                        options: {
                                            top: 'top',
                                            middle: 'middle',
                                            bottom: 'bottom'
                                        }
                                    },
                                    position: {
                                        options: echarts.util.reduce(posList, function (map, pos) {
                                            map[pos] = pos;
                                            return map;
                                        }, {})
                                    },
                                    distance: {
                                        min: 0,
                                        max: 100
                                    }
                                };
                                app.config = {
                                    rotate: 90,
                                    align: 'left',
                                    verticalAlign: 'middle',
                                    position: 'insideBottom',
                                    distance: 15,
                                    onChange: function () {
                                        var labelOption = {
                                            normal: {
                                                rotate: app.config.rotate,
                                                align: app.config.align,
                                                verticalAlign: app.config.verticalAlign,
                                                position: app.config.position,
                                                distance: app.config.distance
                                            }
                                        };
                                        myChart.setOption({
                                            series: [{
                                                label: labelOption
                                            }, {
                                                label: labelOption
                                            }, {
                                                label: labelOption
                                            }, {
                                                label: labelOption
                                            }]
                                        });
                                    }
                                };
                                var labelOption = {
                                    normal: {
                                        show: true,
                                        position: app.config.position,
                                        distance: app.config.distance,
                                        align: app.config.align,
                                        verticalAlign: app.config.verticalAlign,
                                        rotate: app.config.rotate,
                                        formatter: '{c}',
                                        fontSize: 16,
                                        rich: {
                                            name: {
                                                textBorderColor: '#fff'
                                            }
                                        }
                                    }
                                };
                                option = {
                                    title : {
                                        //text: '年各部门后勤故障报修情况',
                                        subtext: '仅统计2020年的数据！'
                                    },
                                    color: ['#006699'],
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow'
                                        }
                                    },
                                    legend: {
                                        data: ['每月访问量']
                                    },
                                    toolbox: {
                                        show: true,
                                        orient: 'vertical',
                                        left: 'right',
                                        top: 'center',
                                        feature: {
                                            mark: {show: true},
                                            dataView: {show: true, readOnly: false},
                                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                            restore: {show: true},
                                            saveAsImage: {show: true}
                                        }
                                    },
                                    calculable: true,
                                    xAxis: [
                                        {
                                            type: 'category',
                                            axisTick: {show: false},
                                            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value'
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '每月访问量',
                                            type: 'line',
                                            barGap: 0,
                                            label: labelOption,
                                            data:[1,2,3,4,5,6,7,8,9,6,5,6],
                                            markPoint : {
                                                data : [
                                                    {type : 'max', name: '最高'},
                                                    {type : 'min', name: '最低'}
                                                ]
                                            },
                                            markLine : {
                                                data : [
                                                    {type : 'average', name: '平均'}
                                                ]
                                            }
                                        }
                                    ]
                                };;
                                if (option && typeof option === "object") {
                                    myChart.setOption(option, true);
                                }
                            </script>
                        </div>
                    </div>
                </div >
            </div >
        </div>


        <!--<div class="layui-col-sm6 layui-col-md6" >
            <div class="layui-card" >
                <div class="layui-card-header" >最新访问者</div >
                <div class="layui-card-body" >

                    <table class="layui-table layuiadmin-page-table" lay-skin="line" >
                        <thead >
                        <tr >
                            <th >IP</th >
                            <th >地址</th >
                            <th >浏览器</th >
                            <th >时间</th >
                        </tr >
                        </thead >
                        <tbody > </tbody >
                    </table >

                </div >
            </div >
        </div>-->

    </div>
</div>

</body>
</html>